<template>
  <div>
    <Modal title="问题详情" :transfer=false :mask-closable="false" v-model="dialogShow"
           :width=900 class-name='limit-height-dialog'>
      <Table ref='table' :height="400" no-data-text="没有查询到相关数据!"
             :loading='pageStatus.loading'
             border :columns="columns" :data="dataTable">
      </Table>
      <Row style="margin-right:10px;">
        <Col span="24">
          <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                show-elevator/>
        </Col>
      </Row>
      <div slot="footer">
        <Button class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
    <Modal title="图片查看" v-model="visible" width="800">
      <img :src="viewUrl" v-if="visible" style="width: 100%">
      <div slot="footer">
        <Button @click="visible=false" class='ivu-btn-save'>关闭</Button>
      </div>
    </Modal>
  </div>

</template>
<script>
import pageCommonFunction from '@/components/pageCommonFunction'
import {Api} from "@/api";

export default {
  name: "TableModel",
  props: {},
  data() {
    return {
      ...this.createCommonDataField(),
      imageUrl: Api.interestedPartiesUserFile,
      viewUrl: '',
      visible: false,
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center',
        },
        {
          minWidth: 110,
          title: '隐患归类',
          align: 'center',
          key: 'issueCategoryName',

        },
        {
          minWidth: 110,
          title: '隐患等级',
          align: 'center',
          key: 'issueLevelName',

        },
        {
          minWidth: 120,
          title: '隐患类别',
          align: 'center',
          key: 'issuePositionName',

        },
        {
          minWidth: 120,
          title: '完成时限',
          align: 'center',
          key: 'rectifyDate',
          render: this.renderCellDate
        },

        {
          minWidth: 150,
          title: '问题描述',
          align: 'center',
          key: 'itemDesc',
        },
        {
          minWidth: 150,
          title: '问题图片',
          align: 'center',
          render: (h, params) => {
            let problemList = params.row.problemList;
            let imgs = [];
            if (problemList) {
              problemList.forEach(id => {
                let url = this.imageUrl + "/file/" + id;
                imgs.push(
                    h('img', {
                      style: {
                        width: "30px",
                        margin: "3px",
                        cursor: "pointer"
                      },
                      attrs: {
                        src: url
                      },
                      on: {
                        click: () => {
                          this.handlerView(url)
                        }
                      }
                    })
                )
              })
            }
            return h('div', [...imgs]);
          }
        },
        {
          minWidth: 150,
          title: '整改措施',
          align: 'center',
          key: 'rectifyPlan',
        },
        {
          minWidth: 150,
          title: '当前进展描述',
          align: 'center',
          key: 'completion',
        },
        {
          minWidth: 150,
          title: '完成时间',
          align: 'center',
          key: 'finishTime',
          render: this.renderCellDate
        },
        {
          minWidth: 150,
          title: '整改图片',
          align: 'center',
          render: (h, params) => {
            let measuresList = params.row.measuresList;
            let imgs = [];
            if (measuresList) {
              measuresList.forEach(id => {
                let url = this.imageUrl + "/file/" + id;
                imgs.push(
                    h('img', {
                      style: {
                        width: "30px",
                        margin: "3px",
                        cursor: "pointer"
                      },
                      attrs: {
                        src: url
                      },
                      on: {
                        click: () => {
                          this.handlerView(url)
                        }
                      }
                    })
                )
              })
            }
            return h('div', [...imgs]);
          }
        },
      ],
      queryUrl: Api.queryCompanyNoticeTableItem,
    }
  },
  async mounted() {
    // this.setTableHeight();
  },
  methods: {
    ...pageCommonFunction,
    handlerView(url) {
      this.viewUrl = url;
      this.visible = true;
    },
    open(data) {
      this.dataToQuery = data;
      this.query();
      this.dialogShow = true;

    },
    query() {
      this.queryAjax();
    },

  },
  watch: {}
}
</script>

<style scoped>

</style>
